<template>
  <div class="singer">
    <div class="rank-list">
      <div class="rank">
        <div class="rank-left rklr n-sgernav">
          <h2 class="tit" id="titt">推荐</h2>
          <ul class="nav f-cb ffcb">
            <li>
              <a href class="cat-flag z-slt">推荐歌手</a>
            </li>
            <li>
              <a href class="cat-flag">入驻歌手</a>
            </li>
          </ul>

          <div class="blk">
            <h2 class="tit">华语</h2>
            <ul class="nav f-cb">
              <li>
                <a href class="cat-flag">华语男歌手</a>
              </li>
              <li>
                <a href class="cat-flag">华语女歌手</a>
              </li>
              <li>
                <a href class="cat-flag">华语组合/乐队</a>
              </li>
            </ul>
          </div>
          <div class="blk">
            <h2 class="tit">欧美</h2>
            <ul class="nav f-cb">
              <li>
                <a href class="cat-flag">欧美男歌手</a>
              </li>
              <li>
                <a href class="cat-flag">欧美女歌手</a>
              </li>
              <li>
                <a href class="cat-flag">欧美组合/乐队</a>
              </li>
            </ul>
          </div>
          <div class="blk">
            <h2 class="tit">日本</h2>
            <ul class="nav f-cb">
              <li>
                <a href class="cat-flag">日本男歌手</a>
              </li>
              <li>
                <a href class="cat-flag">日本女歌手</a>
              </li>
              <li>
                <a href class="cat-flag">日本组合/乐队</a>
              </li>
            </ul>
          </div>
          <div class="blk">
            <h2 class="tit">韩国</h2>
            <ul class="nav f-cb">
              <li>
                <a href class="cat-flag">韩国男歌手</a>
              </li>
              <li>
                <a href class="cat-flag">韩国女歌手</a>
              </li>
              <li>
                <a href class="cat-flag">韩国组合/乐队</a>
              </li>
            </ul>
          </div>

          <div class="blk">
            <h2 class="tit">其他</h2>
            <ul class="nav f-cb">
              <li>
                <a href class="cat-flag">其他男歌手</a>
              </li>
              <li>
                <a href class="cat-flag">其他女歌手</a>
              </li>
              <li>
                <a href class="cat-flag">其他组合/乐队</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="rank-right rklr">
          <div class="ggwrap">
            <!-- 入驻歌手 -->
            <div class="u-title f-cb">
              <h3>
                <span class="f-ff2">入驻歌手</span>
              </h3>
              <a href class="more s-fc3">更多 &gt;</a>
            </div>
            <div class="m-sgerlist sgerlist">
              <ul class="m-cvrlst m-cvrlst-5 f-cb">
                <li v-for="(item,index) in singerList" :key="index">
                  <div class="u-cover u-cover-5">
                    <router-link to="/find/artist">
                      <img :src="item.img1v1Url" alt />
                    </router-link>
                    <p>
                      <a class="itname" href>{{item.name}}</a>
                      <a class="icn u-icn u-icn-5" href>
                        <img src="./images/icon.png" alt />
                      </a>
                    </p>
                  </div>
                </li>
              </ul>
            </div>

            <!-- 热门歌手 -->
            <div class="u-title f-cb ffcb">
              <h3>
                <span class="f-ff2">热门歌手</span>
              </h3>
              <a href class="more s-fc3">更多 &gt;</a>
            </div>

            <div class="m-sgerlist sgerlist">
              <ul class="m-cvrlst m-cvrlst-5 f-cb">
                <li v-for="(item,index) in singBot" :key="index">
                  <div class="u-cover u-cover-5">
                    <img :src="item.img1v1Url" alt />
                    <p>
                      <a class="itname" href>{{item.name}}</a>
                      <a class="icn u-icn u-icn-5">
                        <img src="./images/icon.png" alt />
                      </a>
                    </p>
                  </div>
                </li>
              </ul>
              <div class="cvrlst"></div>
            </div>

            <!-- 歌手列表 -->
            <div class="m-sgerlist">
              <ul class="m-cvrlst m-cvrlst-5 f-cb">
                <li class="sml" v-for="(item,index) in artistsList" :key="index">
                  <a href class="nm nm-icn f-thide s-fc0">{{item.name}}</a>&nbsp;
                  <a class="icn u-icn u-icn-5">
                    <img class="gslbimg" src="./images/icon.png" alt />
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

     
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    singerList: [],
    singBot: [],
    artistsList: [],
  }),
  created() {
    this.getSingerList();
    this.getArtistsList();
  },
  methods: {
    async getSingerList() {
      const {
        data: { artists },
      } = await this.Api.dlxApi.getSingerList();
      this.singerList = artists.slice(0, 10);
      this.singBot = artists.slice(10).slice(0, 10);
      console.log(artists)
    },
    async getArtistsList() {
      const {
        data: { list },
      } = await this.Api.dlxApi.getArtistsList();
      this.artistsList = list.artists.slice(10);
      console.log(list);
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
.rank-list {
  width: 100%;
  height: 100%;
}
.rank {
  width: 990px;
  margin: 0 auto;
  // height: 2200px;
  background-color: rgb(213, 238, 230);
  position: relative;
  /* padding-top: 40px; */
}
.rank-left {
  width: 180px;
  float: left;
  border: 1px solid rgb(179, 176, 176);
  border-top: none;
  height: 1500px;
  border-bottom: none;
}
.rank-left ul li {
  cursor: pointer;
  vertical-align: middle;
  margin-top: 4px;
}
.rank-right {
  width: 804px;
  float: left;
  // background: lightcoral;
  height: 1500px;
}

// 推荐列表
.n-sgernav .tit {
  height: 25px;
  padding-left: 14px;
  font-size: 16px;
  font-family: "Microsoft Yahei";
  margin-left: 4px;
}
#titt {
  margin-top: 46px;
}
a {
  text-decoration: none;
}
.n-sgernav li a.z-slt,
.n-sgernav li a.z-slt:hover {
  background-position: 0 0;
  text-decoration: gray;
  color: #c20c0c;
}
.n-sgernav li a {
  width: 133px;
  padding-left: 27px;
  background-position: 0 -30px;
  color: #333;
}
.z-slt {
  border: 1px solid gray;
}
.n-sgernav li,
.n-sgernav li a {
  float: left;
  width: 133px;
  height: 27px;
  line-height: 28px;
}
.n-sgernav li {
  margin-bottom: 2px;
}
.n-sgernav a {
  background: url(images/singer.png) no-repeat 0 9999px;
  font-size: 12px;
}
.ffcb {
  height: 66px;
  margin-left: 10px;
}
// 华语
.n-sgernav .blk {
  margin: 5px 0 0;
  padding-top: 16px;
  border-top: 1px solid #d3d3d3;
  height: 126px;
  width: 160px;
  margin-left: 10px;
}

// 入住歌手
a,
a *,
.f-hand,
.gslbimg,
.f-hand * {
  cursor: pointer;
}
.ggwrap {
  width: 720px;
  // height: 2000px;
  // background: lightblue;
  margin: 0 auto;
}
.u-title {
  height: 40px;
  border-bottom: 2px solid #c20c0c;
  margin-top: 40px;
}
.u-title h3 {
  float: left;
  font-size: 24px;
  font-weight: normal;
}
.u-title .more {
  float: right;
  margin-top: 14px;
}
.s-fc3,
a.s-fc3:hover {
  color: #666;
}
.f-cb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.f-ff2 {
  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
}
.m-sgerlist .m-cvrlst {
  margin: 20px 0 0 -17px;
}
.m-sgerlist .m-cvrlst li {
  padding-left: 17px;
}
.sgerlist ul li p a img {
  height: 16px;
  right: 3px;
  bottom: -16px;
}
.m-cvrlst-5 li {
  width: 130px;
  height: 154px;
  font-size: 12px;
}
.m-cvrlst li {
  float: left;
  display: inline-block;
  width: 130px;
  height: 152px;
  overflow: hidden;
  padding: 0 0 30px 50px;
  line-height: 1.4;
}

.u-cover-5 {
  width: 130px;
  height: 130px;
}
.u-cover {
  position: relative;
  display: block;
}
.u-cover img {
  display: block;
  width: 130px;
  height: 130px;
}
img,
.txt {
  border: 0;
}
.u-cover-5 .msk {
  background-position: 0 -680px;
}
.u-cover .msk {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.itname {
  float: left;
  color: black;
}
.u-icn img {
  width: 17px;
  height: 17px;
  position: absolute;
  right: 0;
}
.cvrlst {
  margin-bottom: 12px;
  border-bottom: 1px dotted #999;
  width: 720px;
  height: 2px;
}

.ffcb {
  margin-top: 0px;
  margin-left: 0px;
}
// 歌手列表
.m-cvrlst li.sml {
  height: 30px;
  width: 130px;
  padding-bottom: 0;
  line-height: 23px;
}
.m-cvrlst li.sml .nm-icn {
  max-width: 105px;
}
.m-cvrlst li .nm {
  display: inline-block;
  max-width: 85%;
  vertical-align: middle;
}
.f-thide {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
a {
  text-decoration: none;
  color: #333;
}
.m-sgerlist .m-cvrlst-5 .sml .gslbimg {
  position: relative;
  top: 5px;
}


.rightbot img {
  margin-top: 30px;
  margin-left: 35px;
}
a:hover {
  // color: #ba2636;
  text-decoration: underline;
}
a:visited {
  text-decoration: none;
}
</style>